<template>
    <div class="mid-container">
          <p><a style="text-decoration:none" >新建文章</a></p>
       <ul class="list">
            <li :key= item.id v-for="item in articles" @click="getContent(item.id)">
              {{item.name}}
            </li>
      </ul>
    </div>
</template>
<script>
import NewDialog from './Dialog'
export default {
  components:{
      NewDialog
  },
  computed:{
      articles(){
          return this.$store.getters.getArticles;
      }
  },
  methods:{
      getContent(id){
          return this.$store.dispatch('getArticle',id)
      }
  }
}
</script>
<style scoped>
    .mid-container{
      
       width:250px;
        border-right: 1px solid #ddd;
    }
    .mid-container p {
       width:100%;
       text-align: center;
       border-bottom: 1px solid #ddd;
          margin-top:0;
       margin-bottom: 0;
        height: 30px;
       line-height:30px;
       cursor:pointer;
   }
   .mid-container .list{
        width:100%;
       margin-bottom: 0;
       padding-left: 0;
       margin-top: 0;
   }
    .mid-container li{
       border-bottom: 1px solid #ddd;
       height: 50px;
       line-height: 50px;
       text-align: center;
       list-style-type:none;
         cursor:pointer;
   }

    .mid-container li:hover{
       background-color:beige;
   }
</style>
